<template>
  <div class="comp-navbar">
    <!-- 占位栏 -->
    <cover-view class="placeholder-bar" :style="{height: navBarHeight + 'px'}"></cover-view>
    <!-- 导航栏主体 -->
    <cover-view class="navbar"  :style="{height: navBarHeight + 'px',backgroundColor:navBackgroundColor}" >
      <!-- 状态栏 -->
      <cover-view class="nav-statusbar" :style="{height: statusBarHeight + 'px'}"></cover-view>
      <!-- 标题栏 -->
      <cover-view class="nav-titlebar" :style="{height: titleBarHeight + 'px' }">
        <!-- home及后退键 -->
        <cover-view v-if='visibleLeft' class="bar-options">
          <cover-view v-if="backVisible" class="opt opt-back" @click="backClick()">
            <cover-image class="back-image" src="../../../static/images/ruterLeft.png"></cover-image>
          </cover-view>
          <cover-view class="line" v-if="backVisible&&homePath"></cover-view>
          <cover-view v-if="homePath"  class="opt opt-home" @click="homeClick()">
            <cover-image class="home-image" src="../../../static/images/homePage.png"></cover-image>
          </cover-view>
        </cover-view>
        <!-- 标题 -->
        <cover-view class="bar-title">{{title}}</cover-view>
      </cover-view>
    </cover-view>
  </div>
</template>

<script>
export default {
  props: {
    // 导航栏背景色
    navBackgroundColor: {
      default: "#ffffff"
    },
    // 标题颜色
    titleColor: {
      default: "#FFFFFF"
    },
    visibleLeft:false,
    //标题文字
    title:'',
    // 是否显示后退按钮
    backVisible:false,
    // 是否显示返回首页
    homePath: true,
  },
  data() {
    return {
      statusBarHeight: "", // 状态栏高度
      titleBarHeight: "", // 标题栏高度
      navBarHeight: "", // 导航栏总高度
      platform: "",
      model: "",
      brand: "",
      system: ""
    };
  },
  beforeMount() {
    const self = this;
    wx.getSystemInfo({
      success(system) {
        self.statusBarHeight = system.statusBarHeight;
        self.platform = system.platform;
        self.model = system.model;
        self.brand = system.brand;
        self.system = system.system;
        let platformReg = /ios/i;
        if (platformReg.test(system.platform)) {
          self.titleBarHeight = 44;
        } else {
          self.titleBarHeight = 48;
        }
        self.navBarHeight = self.statusBarHeight + self.titleBarHeight;
      }
    });
  },
  mounted() {
    // console.log(`this.backVisible:`, this.backVisible);
  },
  methods: {
    backClick() {
      wx.navigateBack({
        delta: 1
      });
    },
    homeClick() {
      var that=this
       wx.switchTab({
        url:"/pages/index/index/main"
      })
    }
  }
};
</script>

<style  scoped>
.comp-navbar {
  width: 100vw;
  z-index: 999;
  /* position: fixed;
  top: 0px; */
}
.navbar {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9999999;
    width: 100%;
    box-shadow:0px 1px 0px 0px rgba(240,240,240,1);
  }
  .nav-titlebar {
      /* // border: 1px solid green; */
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
     
    }
     .bar-options {  

        width:82px;
        height:32px;
        border-radius:16px;
        border:1px solid rgba(151,151,151,0.2);
        display: flex;
        box-sizing: border-box;
        align-items: center;
        justify-content: space-around;
        position: absolute;
        left: 7px;
        display: flex;
        align-items: center;
        /* // background: hsla(0, 0%, 100%, 0.6); */
        border-radius: 27px;
        padding-right: 5rpx;
       
      }
       .opt {
          width: 50rpx;
          height: 50rpx;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .opt-back .back-image {
            width: 22px;
            height: 22px;
          
        }
        .line {
          display: block;
          height: 30rpx;
          width: 1px;
          background-color: gray;
        }
        .opt-home .home-image {
            width: 50rpx;
            height: 50rpx;
          }
      .bar-title {
        width: 45%;
        font-size: 19px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: center;
        font-size:18px;
        font-family:PingFangSC-Medium,PingFang SC;
        font-weight:500;
      }
  .placeholder-bar {
    /* // background-color: #434343; */
    width: 100%;
  }
</style>